<script setup>
	import {
		reactive,
		nextTick
	} from 'vue'

	import http from '@/api/chatsApi'
	import userApi from '@/api/userAPI'

	import {
		back,
		dateFormatter,
		getSex
	} from '@/utils/common';

	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";

	// import {
	// 	useSocket
	// } from "@/utils/client";

	import {
		useStore
	} from "@/stores/index"
	const userStore = useStore()

	const data = reactive({
		id: 0,
		scrollTop: 0,

		page: 1,
		current: 2,
		total: 0,
		name: "",
		list: [],
		userInfo: userStore.user.userInfo,
		isPublic: 0
	})

	// const scrollToBottom = () => {
	// 	// 自动滚动到底部
	// 	nextTick(() => {
	// 		const query = uni.createSelectorQuery()
	// 		query.select('.dialogue-box').boundingClientRect()
	// 		query.select('.dialogue-box-content').boundingClientRect()
	// 		query.exec(res => {
	// 			const scrollViewHeight = res[0].height
	// 			const scrollContentHeight = res[1].height

	// 			if (scrollContentHeight > scrollViewHeight) {
	// 				const scrollTop = scrollContentHeight - scrollViewHeight
	// 				data.scrollTop = scrollTop
	// 			}
	// 		})
	// 	})
	// }

	// const client = useSocket();

	onLoad(async (options) => {
		data.id = +options.id;
		data.name = options.name;

		data.isPublic = +options.isPublic;

		// uni.startPullDownRefresh();

		// await client.connect((socket) => {

		// 	socket.on('say', async function(item) {
		// 		const row = await userStore.user.findAvatar(item.from_user_id);

		// 		nextTick(() => {
		// 			data.list.push({
		// 				isMy: false,
		// 				id: item.id,
		// 				duration: item.duration,
		// 				group_id: item.room_id,
		// 				member_id: item.from_user_id,
		// 				type: item.type,
		// 				value: item.content,
		// 				avatar: row.avatar,
		// 				realname: row.realname,
		// 				sex: row.sex,
		// 				created_at: item.created_at
		// 			})

		// 			scrollToBottom();
		// 		})


		// 	});
		// });
		
		await loadData();
	})

	onUnload(() => {

		// client.disconnect()
	})

	const loadData = async () => {
		const res = await http.groupHistory(data.id, data.page);
		data.total = res.data.total;

		await initSelect(res.data.data);
	}

	const scrolltolower = async (e) => {
		data.page++;
		await loadData()
	}

	const initSelect = async (items) => {
		if (Array.isArray(items)) {

			var rows = Array.from(items).map((item) => {
				return {
					...item,
					isMy: data.userInfo.id == item.member_id,
					avatar: "",
					realname: "",
					sex: "0"


				}
			})

			for (let i = 0; i < rows.length; i++) {
				let res = await userStore.user.findAvatar(rows[i].member_id);
				rows[i].avatar = res.avatar;
				rows[i].realname = res.realname
				rows[i].sex = res.sex
			}

			if (data.page > 1) {
				data.list = data.list.concat(rows);
			} else {
				data.list = rows;
			}
		} else {
			if (data.page > 1) {

			} else {
				data.list = [];
			}
		}
	}

	const handleAdd = async (item) => {

		const member_id = data.userInfo.id;
		const group_id = data.id;

		let duration = 0;
		if (item.duration) {
			duration = item.duration
		}

		let url = "";
		if (item.url) {
			url = item.url;
		} else if (item.text) {
			url = item.text;
		}

		const currTime = dateFormatter();

		// client.say({
		// 	from_user_id: member_id,
		// 	room_id: group_id,
		// 	content: url,
		// 	type: item.type,
		// 	duration: duration,
		// 	created_at: currTime
		// })

		const row = await userStore.user.findAvatar(member_id);

		nextTick(() => {
			data.list.push({
				isMy: true,
				duration: duration,
				room_id: group_id,
				member_id: member_id,
				type: item.type,
				value: url,
				avatar: row.avatar,
				realname: row.realname,
				sex: row.sex,
				created_at: currTime
			})
			// scrollToBottom();
		})



		//emits('scrollToBottom', data.list)
	}
</script>

<template>
	<view class="header">
		<!-- <image class="back" @click="back" src="/static/icon/back.png" mode="aspectFit" /> -->
		<uni-icons class="back" type="back" @click="back" size="24" color="#828282"></uni-icons>

		<image src="/static/temp/banner.jpeg" mode="widthFix" />
	</view>

	<view class="profile">
		<image src="/static/icon/function2.png" mode="aspectFit" />
		<text>{{data.name}}</text>
	</view>

	<!-- 	<text class="title">本天人数89人</text> -->
	<!-- 	<text class="title count">
		{{
            `公开交互：第2次语音交互  0次视频交互  第1次文字交互  0次资料交互  第1次图片交互
        私人交互：第2次语音交互  0次视频交互  第1次文字交互  0次资料交互  第1次图片交互
        分组交互：第2次语音交互  0次视频交互  第1次文字交互  0次资料交互  第1次图片交互
        本日志鹏先生定制总计交互次数：298次
        截止到目前志鹏先生整体定制的交互次数为：2989次
        `
        }}
	</text> -->
	<!-- 聊天 -->
	<scroll-view scroll-y class="main dialogue-box" :scroll-with-animation="false" :scroll-top="data.scrollTop">

		<!-- 		<view class="message">
			<image class="avatar" src="/static/temp/01.jpeg" mode="aspectFit" />
			<uni-msg :text="'于流量定制专区·专属组于流量定制专区·专属组于流量定制专区·专属组'" />
		</view>
		<view class="message">
			<image class="avatar" src="/static/temp/01.jpeg" mode="aspectFit" />
			<uni-msg :src="'/static/temp/01.jpeg'" />
		</view>
		<view class="message">
			<image class="avatar" src="/static/temp/01.jpeg" mode="aspectFit" />
			<uni-msg :audio="'于流量定制专区·专属组于流量定制专区·专属组于流量定制专区·专属组'" />
		</view> -->

		<view class="dialogue-box-content">
			<template v-for="(item,index) in data.list" :key="index">
				<view class="time">
					{{item.created_at}}
				</view>
				<view class="message" :class="{ isMy: item.isMy }" :id="'message-' + index">
					<image class="avatar" :src="item.avatar" mode="aspectFit" />
					<!-- 			<uni-msg v-if="item.isAudio" :audio="item.isAudio" :src="item.src" :audioSecond="item.audioSecond"
				:isMy="item.isMy" /> 
			<uni-msg v-else :text="item.value" :isMy="item.isMy" /> -->

					<view>
						<view :style="{textAlign:item.isMy ? 'right;font-size: 18rpx;':'left;font-size: 18rpx;'}">
							{{item.realname}}{{getSex(item.sex)}}
						</view>
						<template v-if="item.type == 1">
							<uni-msg :text="item.value" :isMy="item.isMy" />
						</template>
						<template v-else-if="item.type == 2">
							<uni-msg :src="item.value" :isMy="item.isMy" />
						</template>
						<template v-else-if="item.type == 3">
							<uni-msg :video="item.value" :isMy="item.isMy" />
						</template>
						<template v-else-if="item.type == 4">
							<uni-msg :audio="1" :src="item.value" :duration="item.duration" :isMy="item.isMy" />
						</template>
						<template v-else-if="item.type == 5">
							<uni-msg :gift="item.value" :isMy="item.isMy" />
						</template>
					</view>


				</view>
			</template>
			<view style="height: 40rpx" />
		</view>

	</scroll-view>
	<!-- <uni-send @add="handleAdd" v-if="data.isPublic!==1" /> -->
</template>

<style lang="scss" scoped>
	.header {
		padding-top: 40rpx;
		display: flex;
		align-items: center;

		>image {
			width: 528rpx;
		}

		.back {
			margin-left: 30rpx;
			margin-right: 60rpx;
			// width: 22rpx;
			// height: 22rpx;
		}
	}

	.profile {
		margin-top: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		>image {
			margin-right: 10rpx;
			width: 87rpx;
			height: 87.65rpx;
		}

		>text {
			color: rgb(0, 0, 0);
			font-size: 18rpx;
			font-weight: 600;
			line-height: 1.2;
			text-align: center;
		}
	}

	.title {
		padding: 12rpx 88rpx 4rpx;
		color: rgb(0, 0, 0);
		font-size: 14rpx;
		font-weight: 600;
		line-height: 1.6;
		text-align: left;
	}

	.count {
		padding: 0 0 6rpx 100rpx;
		border-bottom: 1rpx solid rgb(208, 222, 233);
		box-sizing: border-box;
	}

	.time {
		text-align: center;
		font-size: 18rpx;
		color: #999;
	}

	.main {
		padding: 0 34rpx 160rpx;
		// 496rpx
		height: calc(100% - 498rpx);
		// background-color: #ff0;
		box-sizing: border-box;

		.message {
			display: flex;
			margin-bottom: 40rpx;

			&.isMy {
				flex-direction: row-reverse;

				// justify-content: flex-end;
				.avatar {
					margin-left: 26rpx;
				}
			}

			.avatar {
				margin-right: 26rpx;
				width: 102rpx;
				height: 96rpx;
				box-sizing: border-box;
				border: 1rpx solid rgb(61, 61, 61);
				border-radius: 17rpx;
				background: rgb(255, 255, 255);
			}
		}
	}
</style>